<template>
  <div>
    <div class="card">
      <el-card class="box-card">
        <el-button type="primary" :icon="Add">添加品牌</el-button>
        <el-table
          :data="tableData"
          border
          height="200"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="id" label="序号" width="180" />
          <el-table-column prop="tmName" label="品牌名称" />
          <el-table-column prop="amount1" label="品牌LOGO" />
          <el-table-column prop="amount1" label="品牌操作" />
        </el-table>
      </el-card>
      <div style="margin: 15px 0 0 15px">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="limit"
          :page-sizes="[3, 5, 7, 9]"
          :disabled="disabled"
          :background="true"
          layout=" prev, pager, next, jumper,->,total, sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getTrademarkList } from '@/api/product/index'
import { onMounted, reactive, ref } from 'vue'
let tableData = reactive()
let pageNum = ref(1)
let limit = ref(3)
//存储已有数据总数
let total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
const getDataList = async () => {
  let result = await getTrademarkList(pageNum.value, limit.value)

  if (result.code == 200) {
    total.value = result.data.total
    tableData = result.data.records
  }
  console.log(tableData, 'tableData')
}
onMounted(() => {
  getDataList()
})
</script>

<style lang="scss" scoped>
.card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
  }
}
</style>
